<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.areaHeight"
        />
      </el-form-item>
      <el-form-item label="距离顶部(%)">
        <el-input-number
          size="small"
          v-model="optionsInfo.postionTop"
        />
      </el-form-item>

      <div class="title-info">
        <el-divider content-position="left">标题设置</el-divider>
      </div>
      <el-form-item label="标题">
        <el-input
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo.contentTitle"
        />
      </el-form-item>
      <el-form-item label="标题字号">
        <el-input-number
          :min="14"
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo.contentTitleFontSize"
        />
      </el-form-item>
      <el-form-item label="标题颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.contentTitleFontColor"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select
          v-model="optionsInfo['contentTitleFontWeight']"
          placeholder="请选择"
        >
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="间距">
        <el-input-number
          :min="14"
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo.marginBottom"
        />
      </el-form-item>
      <div class="title-info">
        <el-divider content-position="left">内容设置</el-divider>
      </div>
      <el-form-item label="内容">
        <el-input
          size="small"
          type="textarea"
          class="hide-spin-button"
          v-model="optionsInfo.content"
        />
      </el-form-item>
      <el-form-item label="内容字号">
        <el-input-number
          :min="14"
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo.contentFontSize"
        />
      </el-form-item>
      <el-form-item label="内容颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.contentFontColor"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select
          v-model="optionsInfo['contentFontWeight']"
          placeholder="请选择"
        >
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";
import carouselEditor from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/carousel-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "infoPublicPicture2Config-editor",

  componentName: "infoPublicPicture2Config-editor",

  mixins: [],

  components: {
    carouselEditor,
    Draggable,
    updatePicture,
  },

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      screenType: "",
      optionsInfo: Object(),
      constantDic: constantDic,
      formEditorInfo: {
        info: "",
        visible: false,
      },
      formVideoInfo: {
        info: "",
        visible: false,
      },
      // 轮播图
      formCarouselInfo: {
        info: "",
        visible: false,
      },
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    };
  },
  mounted() {
    console.log(this.optionsInfo);
  },
  methods: {
    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      console.log(11)
      switch (val) {
        case "formEditorInfo":
          // 修改对应的字段
          Reflect.set(params, "updataType", "content");
          // 旧的数据
          Reflect.set(params, "content", content || "");
          Reflect.set(this.formEditorInfo, "visible", true);
          Reflect.set(this.formEditorInfo, "info", params);
          break;
        case "formVideoInfo":
          // 查找资源库对应的资源
          Reflect.set(params, "type", "video");
          // 修改对应的字段
          Reflect.set(params, "updataType", "video");
          Reflect.set(params, "multiple", true);
          // 旧的数据
          Reflect.set(params, "content", content || []);
          // Reflect.set(params, 'content', [])
          Reflect.set(this.formVideoInfo, "visible", true);
          Reflect.set(this.formVideoInfo, "info", params);
          break;
        case "formCarouselInfo":
          // 查找资源库对应的资源
          Reflect.set(params, "type", "image");
          // 修改对应的字段
          Reflect.set(params, "updataType", "carouselInfo");
          // 旧的数据
          Reflect.set(params, "content", content || []);
          // Reflect.set(params, 'content', []);
          // 是否支持多图片
          Reflect.set(params, "multiple", true);
          Reflect.set(this.formCarouselInfo, "visible", true);
          Reflect.set(this.formCarouselInfo, "info", params);
          break;
      }
    },

    // 取消弹层
    handleCancel() {
      Reflect.set(this.formEditorInfo, "visible", false);
      Reflect.set(this.formVideoInfo, "visible", false);
      Reflect.set(this.formCarouselInfo, "visible", false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      const self = this;
      let { key, val } = valInfo;
      if (key === "content") {
        Reflect.set(self.optionsInfo, key, val);
      } else {
        const updatedArray = self.$lodash.map(val, function (object) {
          return self.$lodash.assign({}, object, { delay: 5 });
        });
        let preInfo = self.optionsInfo[key];
        // let info = [...preInfo, ...updatedArray];
        let info = [...updatedArray];
        Reflect.set(self.optionsInfo, key, []);
        Reflect.set(self.optionsInfo, key, info);
      }
    },

    handleDragEnd() {},

    handleChangeDelay(event, key) {
      console.log(event);
      console.log(key);
    },

    // 删除上传的资源
    handleDelete(index, type) {
      let { carouselInfo, video } = this.optionsInfo;
      switch (type) {
        case "carouselInfo":
          carouselInfo.splice(index, 1);
          break;
        case "video":
          video.splice(index, 1);
          break;
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
.process-step {
  display: flex;
  flex-direction: column;

  ::v-deep .el-form-item__label {
    display: none;
    width: 100% !important;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  .header-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    align-self: center;
    align-items: center;

    .title {
      @include fontWeight();
      font-size: 20px;
    }

    .el-button {
      padding: 8px 22px;
    }
  }
}

.number-area,
.resource-area,
.tips-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 14px;
  align-self: center;
  align-items: center;

  :deep(.el-form-item__label) {
    width: 100% !important;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  :deep(.ql-toolbar) {
    padding: 0;
    border-bottom: none;

    .ql-formats {
      display: none;
    }
  }

  :deep(.ql-container) {
    min-height: 180px;

    .ql-editor p {
      line-height: 28px;
    }
  }
}

.picture-resource {
  .item-area {
    min-width: inherit;
    min-height: inherit;

    .name {
      border: none;
      display: flex;
      flex-direction: column;
      min-width: calc(100% - 64px);
      overflow: hidden;
      margin-right: 10px;

      .el-button {
        border: none;
        background: transparent;
        @include singleEllipsis(100%);
        text-align: left;
        padding: 9px 0;
      }
    }

    .icon {
      min-width: 48px;
      height: auto;
      border: none;
      font-size: 18px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      i {
        cursor: pointer;
        &:first-child {
          padding-right: 6px;
        }
        &:hover {
          color: dodgerblue;
        }
      }
    }
  }
}


</style>